<script setup>
import Header from "../components/HeaderVue.vue";
import {ref} from "vue";
import {Pointer, VideoPlay} from "@element-plus/icons-vue";
import {getAiRecommendHomeVideo} from "../../api/home/home.js";
    // 功能区中每个图标类 icon图标链接 text图标对应文本 link点击图标跳转的链接
    const functionItems = [
      {
        // 动态src需要使用这种形式
        icon: new URL('../../assets/icon/mszd.png',import.meta.url).href,
        text: '自主练习',
        link: '/practice'
      },
      {
        icon: new URL('../../assets/icon/sktx.png',import.meta.url).href,
        text: '网课学习',
        link: '/video'
      },
      {
        icon: new URL('../../assets/icon/xygl.png',import.meta.url).href,
        text: '咨询AI',
        link: '/ai'
      },
      {
        icon: new URL('../../assets/icon/zjdd.png',import.meta.url).href,
        text: '路线推荐',
        link: '/road'
      },
      {
        icon: new URL('../../assets/icon/zshy.png',import.meta.url).href,
        text: '学习评测',
        link: '/judge'
      },
    ];
    // ai推荐视频列表
    let videoItems = ref([]);
    // 链接列表
    const linkItems = [
      {
        // 网站标题
        title: '慕课网',
        // 网站图表
        icon: new URL('../../assets/icon/muke.png',import.meta.url).href,
        // 网站描述
        desc: '慕课网，程序员的梦工厂。',
        // 网站链接
        link: 'https://www.imooc.com/',
      },
      {
        // 网站标题
        title: '中国大学MOOC',
        // 网站图表
        icon: new URL('../../assets/icon/mooc.png',import.meta.url).href,
        // 网站描述
        desc: '中国大学MOOC，优质在线课程学习平台。',
        // 网站链接
        link: 'https://www.icourse163.org/',
      },
      {
        // 网站标题
        title: 'Gitee码云',
        // 网站图表
        icon: new URL('../../assets/icon/logo-black.svg',import.meta.url).href,
        // 网站描述
        desc: 'gitee优质代码开源平台',
        // 网站链接
        link: 'https://gitee.com/',
      },
      {
        // 网站标题
        title: '讯飞智能教育平台',
        // 网站图表
        icon: new URL('../../assets/icon/xunfei.png',import.meta.url).href,
        // 网站描述
        desc: 'AI赋能科学教研。',
        // 网站链接
        link: 'https://www.fifedu.com/iplat/html/index.html',
      },
    ];
    // 轮播图
    const swiperItems = [
      {
        link: new URL('../../assets/image/swiper/slideshows1.jpg',import.meta.url).href,
      },
      {
        link: new URL('../../assets/image/swiper/slideshows2.jpg',import.meta.url).href,
      },
    ]
    // 当前选择的tabindex
    const activeName = ref('0');
    // 根据tab切换的科目
    let selectedSubject = ref('Java');
    // 是否正在加载
    let videoIsLoading = ref(true);
    // 获取用户角色
    let userRole = localStorage.getItem("role");
    // 页面加载时的加载动画
    const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
    // 当进入网页时获取ai推荐的相关科目的视频
    getAiRecommendHomeVideo(selectedSubject.value).then(response => {
      videoItems.value = response.data;
      // 获取ai视频 说明不在加载
      videoIsLoading.value = false;
    }).catch(err=> {
      console.log(err)
    })
</script>

<template>
  <div class="common-layout">
    <el-container>
      <div class="fix-header">
        <el-header class="header-outer">
          <Header></Header>
        </el-header>
      </div>
      <el-main>
        <!-- 轮播图-->
        <div class="swiper-outer">
          <div class="swiper-inner">
            <!-- height 轮播图高度 设置成和inner高度一样就行 -->
            <el-carousel height="452px" motion-blur>
              <el-carousel-item v-for="(item,index) in swiperItems" :key="index">
                <el-image :src="item.link" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <!-- 功能区 -->
        <div class="deeper-color-area">
          <div class="function-area-outer">
            <ul class="function-area-inner">
              <li v-for="(item, index) in functionItems" :key="index">
                <div class="imgAndSpan">
                  <el-image :src="item.icon" class="icon"  />
                  <span>{{ item.text }}</span>
                </div>
              </li>
            </ul>
          </div>

          <div class="headline-outer">
            <div class="headline-inner">
              <h3 class="title">视频资源</h3>
            </div>
          </div>
          <!-- 视频区-->
          <div class="video-area-outer">
            <el-card shadow="always" class="video-area-inner">
              <el-tabs v-model="activeName" class="video-area-tabs">
                <el-tab-pane label="JavaEE"></el-tab-pane>
                <el-tab-pane label="HTML&JS"></el-tab-pane>
                <el-tab-pane label="大数据开发"></el-tab-pane>
                <el-tab-pane label="人工智能"></el-tab-pane>
              </el-tabs>
              <div class="video-area">
                <div
                    v-loading="videoIsLoading"
                    element-loading-text="努力加载中╭( ･ㅂ･)و ̑̑ ！..."
                    :element-loading-spinner="svg"
                    element-loading-svg-view-box="-10, -10, 50, 50"
                    element-loading-background="rgba(122, 122, 122, 0.1)"
                    class="video-loading"></div>
                <div class="video" v-for="(item, index) in videoItems" :key="index">
                  <img class="img" :src=item.cover  alt=""/>
                  <div class="title">
                    <el-text line-clamp="2">{{ item.title }}</el-text>
                  </div>
                  <div class="detail">
                    <el-text link>
                      <el-icon class="iconfont">
                        <User />
                      </el-icon>
                      {{item.publisherName}}</el-text>
                    <el-text link style="text-decoration: none">
                      <el-icon class="iconfont">
                        <VideoPlay />
                      </el-icon>
                      {{ item.playCount}}
                    </el-text>
                    <el-text link>
                      <el-icon class="iconfont">
                        <Star />
                      </el-icon>
                      {{ item.collectCount}}
                    </el-text>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="headline-outer">
          <div class="headline-inner">
            <h3 class="title">友情链接</h3>
          </div>
        </div>
        <!-- 友情链接区域 -->
        <div class="link-area-outer">
          <div class="link-area-inner">
            <el-space wrap size="large">
              <a v-for="(item,index) in linkItems" :key="index"  class="link" :href="item.link" target="_blank">
                <div class="link-header">
                  <div class="link-header-title">{{item.title}}</div>
                  <img class="link-header-icon" :src=item.icon  alt="" style="width: 30%;height: 30%;margin-right: -8px;"/>
                </div>
                <el-text line-clamp="2" class="link-desc">
                  {{item.desc}}
                </el-text>
              </a>
            </el-space>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
html,body,#app{
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0;
  /*外部间距也是如此设置*/
  margin: 0;
  /*统一设置高度为100%*/
  height: 100%;
  .common-layout {
    .fix-header {
      position: fixed;
      //top: 0;
      width: 100%;
      z-index: 900;
      box-shadow: 0 4px 8px 0 rgba(7,17,27,0.1);
      .header-outer {
        height: 100%;
        // 改变盒子背景 略灰一点
        background-color: #fff;
        // 改变外部盒子边界线便于区分
        border-bottom: 2px solid #eee;
        // 设置盒子底部阴影
        box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
      }
    }

    /*分割线*/
    .headline-outer {
      .headline-inner {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        .title {
          font-weight: bold;
          font-size: 16px;
          color: #252b3a;
          position: relative;
          display: inline-block;
        }
      }
    }

    /*轮播图样式*/
    .swiper-outer {
      width: 100%;
      height: 452px;
      margin-top: 80px;
      padding-bottom: 30px;
      display: block;
      .swiper-inner {
        width: 1200px;
        margin: 0 auto;
        box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
        position: relative;
        height: 100%;
      }
    }

    /*功能区样式*/
    .function-area-outer {
      background: rgba(248, 250, 252, 1);
      // 改变外部盒子边界线便于区分
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      // 设置盒子底部阴影
      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);

      .function-area-inner {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        display: flex;
        justify-content: space-around;
        list-style: none;

        .imgAndSpan {
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .icon {
            width: 38px;
            height: 33px;
            vertical-align: top;
            display: block;
          }

          span {
            margin-left: 20px;
            margin-top: 20px;
            // 文字不换行
            white-space: nowrap;
            display: block;
            font-size: 16px;
            margin-bottom: 20px;
          }
        }
      }
    }

    /*视频区样式*/
    .video-area-outer {
      .video-area-inner {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        border: 2px #fff solid;
        height: 630px;
        background: -moz-linear-gradient(to bottom, #f3f5f8, #fff);
        background: linear-gradient(to bottom, #f3f5f8, #fff);
        border-radius: 16px;
        box-sizing: border-box;
        box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .06), -8px -8px 20px 0 #fff;
        z-index: 3;
        .video-area {
          width: 100%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          margin-top: 5px;
          margin-left: 20px;
          position: relative;
          .video-loading {
            width: 1300px;
            height: 550px;
            z-index: 10;
            top: 50%;
            left: -5%;
            position: absolute;
          }
          .video-loading /deep/ .el-loading-mask {
            z-index: 9;
          }
          .video {
            display: block;
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 24px 24px 0;
            background: #FFFFFF;
            box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15);
            border-radius: 8px;
            float: left;
            transition: all .2s;

            .img {
              width: 100%;
              height: 152px;
              border-radius: 8px 8px 0 0;
            }

            .title {
              padding: 0 0 8px 10px;
              text-align: left;
              font-size: 15px;
              text-decoration: none;
              line-height: 24px;
              font-family: PingFang-SC-Medium;
              color: rgba(51, 51, 51, 1);
              height: 46px;
              font-weight: 600;
            }

            .detail {
              text-decoration: none;
              margin-top: 6px;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              color: #9199A1;
              font-size: 12px;
              margin-bottom: 8px;
              padding: 0 8px;
            }
          }
        }

        // 修改el-tabs
        .video-area-tabs /deep/ .el-tabs__item {
          font-weight: bold;
        }
        .video-area-tabs /deep/ .el-tabs__item.is-active {
          color: #f7303a;//选中
          opacity: 1;
          background: rgba(0, 102, 255, 0.08);
          border-radius: 4px 4px 3px 3px;
        }

        /*去掉tabs底部的下划线*/
        .video-area-tabs /deep/ .el-tabs__nav-wrap::after {
          position: static !important;
        }

        .video-area-tabs /deep/ .el-tabs__active-bar {
          background-color: #166fe8; /* 修改底部横杠的颜色 */
          height: 3px; /* 修改底部横杠的高度 */
           width: 100px !important;
        }
        .video-area-tabs /deep/ .el-tabs__active-bar::after{
          //给激活的时底部tab横线添加三角
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          left: 39%;
          bottom:2px;
          border-top: 10px solid transparent;
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
          border-bottom: 5px solid #166fe8;
        }
        .video-area-tabs /deep/ .el-tabs__item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100px !important;
          padding: 0 !important;
        }
        .video-area-tabs /deep/ .el-tabs__nav.is-top{
          display: flex;
        }
        .video-area-tabs /deep/ .el-tabs__nav.is-top > div {
          width: 100px;
          text-align: center;
        }
      }
    }

    .link-area-outer {
      .link-area-inner {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        .link {
          width: 240px;
          height: 70px;
          padding: 20px 20px 22px;
          border-radius: 8px;
          background: rgba(248, 250, 252, 1);
          box-shadow: 0 1px 2px 0 rgba(122, 161, 225, .2);
          .link-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            .link-header-title {
              float: left;
              color: #140e35;
              font-size: 18px;
              font-weight: 600;
              line-height: 28px;
            }
            .link-header-icon {
              margin-right: 12px;
              width: 28px;
              height: 28px;
            }
          }
          .link-desc {
            color: #565772;
            font-size: 12px;
            line-height: 20px;
          }
        }
      }
    }
  }
}
.el-loading-spinner .path {
  -webkit-animation: loading-dash 1.5s ease-in-out infinite;
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 4;
  stroke-linecap: round;
  stroke:#fd2957!important;
}
.el-loading-spinner .el-loading-text {
  color: #fd2957!important;
  margin: 3px 0;
  font-size: 14px;
}
</style>